<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <div></div>
  
    <button>显示/sliddown/fadeIn</button>
    <button>隐藏/slideUp/fadeOut</button>
    <script src="./jQuery.min.js"></script>
    <script>
        // jQuery动画
        // 1、内置动画（隐藏和显示）
        // show([speed],[easing],[fn])：显示元素
          // hide([speed],[easing],[fn])：隐藏元素
        // 第一个参数：表示速度  slow   normal fast   或者时间的总毫秒数
        // 第二个参数：表是切换效果‘swing’  ‘linear’
        // 第三个是参数：在动画完成时，执行的一个回调函数
        // 不加参数，没有动画效果
// $('button').eq(0).click(function(){
//    $('div'). show('3000','linear',function(){
//         console.log(123);
//     })
// })
// $('button').eq(1).click(function(){
//    $('div'). show('3000','linear',function(){
//         console.log(123);
//     })
// })
        // 2、
        // slideDown() 通过改变元素高度（向下变大） 动态显示元素
        // 参数和show（）参数一样
        // slideUp() 通过改变元素高度（向上变小） 动态隐藏元素
        // 参数和show（）参数一样
// $('button').eq(0).click(function(){
//     $('div').slideDown()
// })

// $('button').eq(1).click(function(){
//     $('div').slideUp()
// })


//3 淡入淡出
//   fadeIn():通过改变元素透明度    显示元素
//   fadeOut():通过改变元素透明度    隐藏元素
//   参数和show（）一样
// $('button').eq(0).click(function(){
//     $('div').fadeIn()
// })

// $('button').eq(1).click(function(){
//     $('div').fadeOut()
// })



// fadeTo():作用：手动设置透明度
//         参数1：动画速度
//         参数2：透明度  0-1
//     参数3：切换效果
//     参数4：回调函数，当动画执行完成后，执行代码


// 动画队列：
// 在给我们在程序中执行动画时候，如果动画没有完全都执行完，动画会排队执行
// 如果想停止动画队列，在动画前面加stop（）方法（内部就是排他思想）
    </script>
</body>
</html>